<template>
    <van-nav-bar
        title="分类"
        fixed
    />
    
    <div style="height: 50px;"></div>

    <van-tree-select
        v-model:main-active-index="activeIndex"
        height="86vh"
        :items="TypeList"
        @click-nav="onType"
    >
        <template #content>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                >
                    <van-grid :border="false" :column-num="2">
                        <van-grid-item
                            v-for="item in list"
                            :key="item.id"
                            :to="{path: '/product/product/info',query: { id: item.id }}"
                        >
                            <div class="thumb">
                                <van-image :src="item.thumbs_cdn[0]" />
                            </div>
                            <p>{{ item.name }}</p>
                        </van-grid-item>
                    </van-grid>
                </van-list>
            </van-pull-refresh>

        </template>
    </van-tree-select>

    <Footer />
</template>

<script setup>
import Footer from 'components/common/Footer.vue';
import { getCurrentInstance, ref, reactive, onMounted } from 'vue';

const { proxy } = getCurrentInstance();
//选中的索引
const activeIndex = ref(0);
const TypeList = reactive([{ text: '全部', id: 0 }]);
//判断下拉刷新状态
const refreshing = ref(false);
//懒加载状态
const loading = ref(false);
//是否下拉加载
const finished = ref(false);
//根据id的值选中分类的产品
const typeid = ref(0);
//产品数据
const list = reactive([]);
//数据总数
const listCount = ref(0);
//第几页
const page = ref(1);
//每一页显示的商品数量
const limit = ref(10);

//挂载成功后输出
onMounted(() => {
    getTypeData();
});
//下拉刷新
const onRefresh = () => {
    refreshing.value = true;
    page.value = 1;
    list.length = 0;
    loading.value = true;

    onLoad();
}
//上拉刷新
const onLoad = () => {
    if(!refreshing.value && list.length < listCount.value)
    {
        page.value = page.value + 1;
    }

    if(refreshing.value)
    {
        setTimeout(() => {
            refreshing.value = false;
        },1500);
    }

    setTimeout(getProductData,1500);
}

const getProductData = async () => {
    let data = {
        typeid:typeid.value,
        page:page.value,
        limit:limit.value
    }

    let result = await proxy.$Api.productIndex(data);

    if(result && result.code === 1)
    {
        finished.value = false;
        loading.value = false;

        listCount.value = result.data.count;
        list.push(...result.data.list);

        if(list.length === listCount.value)
        {
            finished.value = true;
            loading.value = false;
            return;
        }
    }else{
        finished.value = true;

        return;
    }
}

const onType = (index) => {
    typeid.value = TypeList[index].id;
    onRefresh();
}

const getTypeData = async () => {
    let result = await proxy.$Api.typeIndex();

    if(result && result.code === 1)
    {
        for(let item of result.data)
        {
            TypeList.push({
                text:item.name,
                id:item.id
            });
        }
    }
}

</script>